<ion-view hide-tabs="true"  hide-nav-bar="true" view-title="取消课程" style="background-color: #F1F1F1;" ng-controller="cancelCourseDetailCtrl" ng-cloak>
    <ion-header-bar align-title="center"  class="bar-default" style="background-color: #F8F8F8;">
        <div class="buttons">
            <button class="button" ng-click="backPrePage()"><span class="ion-ios-arrow-thin-left" style="font-size: 24px;"></span></button>
        </div>
        <h1 class="title">取消课程</h1>
    </ion-header-bar>
    <ion-content >
        <div class="detailState padding">
            <div class="detailStateMes">
                <div style="width: 20%;"><span style="color: #28a54c;" class="ion-ios-checkmark-outline fs100 "></span></div>
                <div class="detailed f12 " style="color: #666666;width: 70%;">
                    <ul class="">
                        <li>
                            <div class="fw  ">
                                <h4 class="lightGreen">已取消！未使用...</h4>
                            </div>
                        </li>
                        <li ng-show="cancelCourse.courseFlag">
                            <div>
                                <span>第{{cancelCourse.chargeNum}}节</span> / <span>{{cancelCourse.courseName}}</span> / <span>{{cancelCourse.classLength}}分钟</span>
                            </div>
                        </li>
                        <li>
                            <div>教练:
                                <span >{{cancelCourse.coachName}}</span>
                            </div>
                        </li>
                        <li ng-show="cancelCourse.courseFlag">
                            <div>购买套餐产品: <span>{{cancelCourse.productName}}</span><span class="courseMonney ion-social-yen">{{cancelCourse.totalPrice}}</span></div>
                        </li>
                        <li>
                            <div>下课时间: <span class="">{{cancelCourse.end * 1000 | date:'yyyy-MM-dd hh:mm'}}</span></div>
                        </li>
                        <li>
                            <div>取消时间: <span class="">{{cancelCourse.cancel_time}}</span></div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <ion-list>
            <!--为团课时显示-->

            <ion-item class="clearfix clearfixEndPading"  ng-hide="cancelCourse.courseFlag" ng-click="leagueDetailClick(cancelCourse.id,22)">
                <div class="fl" style="margin-right: 10px;">
                    <ul>
                        <img ng-src="{{cancelCourse.pic}}" alt="" style="width:48px; height:48px;border-radius: 50%;">
                    </ul>
                </div>
                <div class="fl" style="width:30%;">
                    <ul style="margin:0 auto;">
                        <li><span>{{cancelCourse.name}}</span><span class="f12" style="margin-left: 4px;">{{cancelCourse.level}}</span></li>
                        <li>
                            <ul style="display: flex;">
                                <li class="" >
                                    <img style="width: 16px;margin-top: 4px;" ng-src="{{cancelCourse.scoreImg.one}}" alt="">
                                </li>
                                <li class="" >
                                    <img style="width: 16px;margin-top: 4px;" ng-src="{{cancelCourse.scoreImg.two}}" alt="">
                                </li>
                                <li class="" >
                                    <img style="width: 16px;margin-top: 4px;" ng-src="{{cancelCourse.scoreImg.three}}" alt="">
                                </li>
                                <li class="" >
                                    <img style="width: 16px;margin-top: 4px;" ng-src="{{cancelCourse.scoreImg.four}}" alt="">
                                </li>
                                <li class="" >
                                    <img style="width: 16px;margin-top: 4px;" ng-src="{{cancelCourse.scoreImg.five}}" alt="">
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
                <span class="fr ion-chevron-right grey" style="margin-top: 10px"></span>
                <div  class="fr">
                    <ul style="text-align: center;margin-right: 10px;">
                        <li ><img style="width: 30px;height: 30px;border-radius: 50%;"  ng-src="{{cancelCourse.coachPic}}" alt=""></li>
                        <small class="grey">{{cancelCourse.coachName}}</small>
                    </ul>
                </div>
            </ion-item>
            <ion-item  ng-click="mapLeagueClick(cancelCourse.id,22)" ng-hide="cancelCourse.courseFlag">
                <div class="clearfix">
                    <div class="fl ">
                        <img class="grey" style="width: 40px;" ng-src="img/u71.png" alt="">
                    </div>
                    <div class="fl f12 " style="margin-left: 6px;" >
                        <ul>
                            <li>{{cancelCourse.venueName}}</li>
                            <li class="grey">{{cancelCourse.venueAddress}}</li>
                        </ul>
                    </div>
                    <span class="fr ion-chevron-right grey" style="margin-top: 10px"></span>
                </div>
            </ion-item>
            <ion-item  ng-click="mapPrivateClick(cancelCourse.id)" ng-show="cancelCourse.courseFlag">
                <div class="clearfix">
                    <div class="fl ">
                        <img class="grey" style="width: 40px;" ng-src="img/u71.png" alt="">
                    </div>
                    <div class="fl f12 " style="margin-left: 6px;" >
                        <ul>
                            <li>{{cancelCourse.venueName}}</li>
                            <li class="grey">{{cancelCourse.venueAddress}}</li>
                        </ul>
                    </div>
                    <span class="fr ion-chevron-right grey" style="margin-top: 10px"></span>
                </div>
            </ion-item>
            <!--为私课时显示，点击跳转到私教详情-->
            <!--ng-click="privateClick(item.charge.id)"-->
            <ion-item  ng-show="cancelCourse.courseFlag" ng-click="privateDetailClick(cancelCourse.orderId)">
                <div class="clearfix">
                    <div class="fl courseDetailImg">
                        <img ng-src="{{cancelCourse.pic}}" alt="">
                    </div>
                    <div class="fl f12 " style="margin-left: 6px;">
                        <div>
                            <div><h4>{{cancelCourse.productName}}</h4></div>
                            <div>
                                <ul style="display: flex;">
                                    <li class="" >
                                        <img style="width: 16px;margin-top: 4px;" ng-src="{{cancelCourse.scoreImg.one}}" alt="">
                                    </li>
                                    <li class="" >
                                        <img style="width: 16px;margin-top: 4px;" ng-src="{{cancelCourse.scoreImg.two}}" alt="">
                                    </li>
                                    <li class="" >
                                        <img style="width: 16px;margin-top: 4px;" ng-src="{{cancelCourse.scoreImg.three}}" alt="">
                                    </li>
                                    <li class="" >
                                        <img style="width: 16px;margin-top: 4px;" ng-src="{{cancelCourse.scoreImg.four}}" alt="">
                                    </li>
                                    <li class="" >
                                        <img style="width: 16px;margin-top: 4px;" ng-src="{{cancelCourse.scoreImg.five}}" alt="">
                                    </li>
                                    <li style="padding-top:3px;">{{cancelCourse.score}}分</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <span class="fr ion-chevron-right grey" style="margin-top: 10px"></span>
                    <div class="fr f12 lightYellow" style="text-align: right;margin-right: 20px;">
                        <div class="f20"><span class="ion-social-yen"><b>{{cancelCourse.totalPrice}}</b></span></div>
                        <div >共<span>{{cancelCourse.courseAmount}}</span>节/总价</div>
                    </div>
                </div>
            </ion-item>
            <!--为私课时显示-->
            <ion-item ng-show="cancelCourse.courseFlag">
                <ul  class="pitchDetailLists f12">
                    <li class="pitchDetail clearfix" style="height: 100%;min-height: 50px;" ng-repeat="list in cancelCourse.packageClass">
                        <!--<div class="pitchNum "><span class="{{classState}} pitchNumMark " ></span></div>-->
                        <div class="pitchNum "><span ng-if='list.status == 2' class="pitchNumMark"></span> <span ng-if="list.status == 1" style="color:#28a54c;height:30px;width:19px;" class="ion-checkmark-circled"></span> </div>

                        <div class="fl mTm10" style="margin-left: 20px;" >
                            <span style="margin-left: 15px;">第{{list.times}}节</span>
                            <span style="margin-left: 15px;">{{list.name}}</span>
                            <span style="margin-left: 15px;">时长{{list.course_length}}分钟</span>
                            <span class="ion-social-yen" style="margin-left: 15px;">{{list.sale_price}}</span>
                        </div>
                        <div class="fr mTm10 " ng-if="list.status == 1" >
                            <div class="fr ">教练:<span class="">{{list.sectionCoach}}11</span></div>
                        </div>
                    </li>
                </ul>
            </ion-item>
        </ion-list>
    </ion-content>
</ion-view>